import { Component } from 'react';
import { Tree,MenuItem,Menu,Popover,Icon } from '@blueprintjs/core';

export default class SettingTree extends Component {
    constructor(props) {
        super(props);
		
		const LayerMenu = (
			<Menu>
		        <MenuItem icon="graph" text="定位" />
		        <MenuItem icon="map" text="显示行政边界" />
		    </Menu>
		)
		
		this.state = {
			num: 11,
			filterValue: "",
			nodes: props.nodes
		}
		
		// switch (this.props.id){
		// 	case "1":
		// 		this.state.nodes = [
		// 			{
		// 				id: 1,
		// 				hasCaret: false,
		// 				isExpanded: false,
		// 				icon: "map-marker",
		// 				label: "宝带西路",
		// 				secondaryLabel: (
		// 					<Popover content={LayerMenu} position="right">
		// 						<Icon icon="drag-handle-horizontal" />
		// 					</Popover>
		// 				)
		// 			},
		// 			{
		// 				id: 2,
		// 				hasCaret: false,
		// 				isExpanded: false,
		// 				icon: "map-marker",
		// 				label: "宝带东路",
		// 				secondaryLabel: (
		// 					<Popover content={LayerMenu} position="right">
		// 						<Icon icon="drag-handle-horizontal" />
		// 					</Popover>
		// 				)
		// 			}
		// 		]
		// 		break;
		// 	case "2":
		// 		this.state.nodes = [
		// 			{
		// 				id: 3,
		// 				hasCaret: false,
		// 				isExpanded: false,
		// 				icon: "map-marker",
		// 				label: "巨塔花园",
		// 				secondaryLabel: (
		// 					<Popover content={LayerMenu} position="right">
		// 						<Icon icon="drag-handle-horizontal" />
		// 					</Popover>
		// 				)
		// 			},
		// 			{
		// 				id: 4,
		// 				hasCaret: false,
		// 				isExpanded: false,
		// 				icon: "map-marker",
		// 				label: "绿城",
		// 				secondaryLabel: (
		// 					<Popover content={LayerMenu} position="right">
		// 						<Icon icon="drag-handle-horizontal" />
		// 					</Popover>
		// 				)
		// 			},
		// 			{
		// 				id: 5,
		// 				hasCaret: false,
		// 				isExpanded: false,
		// 				icon: "map-marker",
		// 				label: "美韵城",
		// 				secondaryLabel: (
		// 					<Popover content={LayerMenu} position="right">
		// 						<Icon icon="drag-handle-horizontal" />
		// 					</Popover>
		// 				)
		// 			}
		// 		]
		// 		break;
		// 	case "3":
		// 		this.state.nodes = [
		// 			{
		// 				id: 6,
		// 				hasCaret: false,
		// 				isExpanded: false,
		// 				icon: "map-marker",
		// 				label: "苏科大",
		// 				secondaryLabel: (
		// 					<Popover content={LayerMenu} position="right">
		// 						<Icon icon="drag-handle-horizontal" />
		// 					</Popover>
		// 				)
		// 			},
		// 			{
		// 				id: 7,
		// 				hasCaret: false,
		// 				isExpanded: false,
		// 				icon: "map-marker",
		// 				label: "苏经贸",
		// 				secondaryLabel: (
		// 					<Popover content={LayerMenu} position="right">
		// 						<Icon icon="drag-handle-horizontal" />
		// 					</Popover>
		// 				)
		// 			},
		// 			{
		// 				id: 8,
		// 				hasCaret: false,
		// 				isExpanded: false,
		// 				icon: "map-marker",
		// 				label: "东医院",
		// 				secondaryLabel: (
		// 					<Popover content={LayerMenu} position="right">
		// 						<Icon icon="drag-handle-horizontal" />
		// 					</Popover>
		// 				)
		// 			}
		// 		]
		// 		break;
		// 	default:
		// 		break;
		// }
		
		this.handleNodeClick = this.handleNodeClick.bind(this);
		this.handleNodeDoubleClick = this.handleNodeDoubleClick.bind(this);
		this.handleNodeCollapse = this.handleNodeCollapse.bind(this);
		this.handleNodeExpand = this.handleNodeExpand.bind(this);
		this.refNodes = this.refNodes.bind(this)
    }
	
	refNodes(nodes) {
		this.setState({nodes,nodes})
	}
	
	handleNodeClick(nodeData, nodePath, e) {
        const originallySelected = nodeData.isSelected;
        if (!e.shiftKey) {
            this.forEachNode(this.state.nodes, n => (n.isSelected = false));
        }
		nodeData.isSelected = true;
        this.setState(this.state);
    };
	
	handleNodeDoubleClick(nodeTree, nodePath, e) {
		this.setState(this.state);
	}

    handleNodeCollapse(nodeData, nodePath, e) {
        nodeData.isExpanded = false;
        this.setState(this.state);
    };

    handleNodeExpand(nodeData, nodePath, e) {
        nodeData.isExpanded = true;
        this.setState(this.state);
    };
	
	forEachNode(nodes, callback) {
        if (nodes == null) {
            return;
        }

        for (const node of nodes) {
            callback(node);
            this.forEachNode(node.childNodes, callback);
        }
    }

    componentWillMount() {
		if(this.props.onRef) {
			this.props.onRef(this)
		}
    }
	
    render() {
        return (
			<div>
				<Tree
					contents={this.state.nodes}
					onNodeClick={this.handleNodeClick}
					onNodeDoubleClick={this.handleNodeDoubleClick}
					onNodeCollapse={this.handleNodeCollapse}
					onNodeExpand={this.handleNodeExpand}
				/>
			</div>
			
        )
    }
}